<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>微分销--微信支付页</title>
        <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>

	<body>

		<!--页面顶部白条条，由js动态加载-->
		<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
		<div class="top"></div>
    	<script type="text/javascript">$(".top").load("shortcut.html");</script>

		<div class="cart py-container" id="payVm">
			<!--logoArea-->
			<div class="logoArea">
				<div class="fl logo"><span class="title">收银台</span></div>
			</div>
			<!--主内容-->

			<a href="payfail.html">支付失败演示页</a>
			<a href="paysuccess.html">支付成功演示页</a>


			<div class="checkout py-container  pay">
				<div class="checkout-tit">
					<h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：{{orderId}}</span></h4>
                    <span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{fee/100}}</em>元</span>
					<div class="clearfix"></div>
				</div>
				<div class="checkout-steps">
					<div class="fl weixin">微信支付</div>
                    <div class="fl sao">
                        <p class="red">二维码已过期，刷新页面重新获取二维码。</p>
                        <div class="fl code">
                            <div id="qrImage"></div>
                            <div class="saosao">
                                <p>请使用微信扫一扫</p>
                                <p>扫描二维码支付</p>
                            </div>
                        </div>
                        <div class="fl phone">

                        </div>

                    </div>
                    <div class="clearfix"></div>
				    <p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
				</div>
			</div>

		</div>


	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript">
			$(function(){
				$("ul.payType li").click(function(){
					$(this).css("border","2px solid #E4393C").siblings().css("border-color","#ddd");
				})
			})
		</script>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.js"></script>
<script type="text/javascript">


	    axios.defaults.timeout = 5000;   // 超时时间
		axios.defaults.baseURL = "http://localhost:8086/";  // baseURL   
		
		axios.interceptors.request.use(function(config){
			console.log(config)
			config.withCredentials= false 
			//设置jwt令牌
			config.headers.token=sessionStorage.getItem("token")
			return config;
		})
		 //响应拦截器
		 axios.interceptors.response.use(res=>{


			return res.data;

			})	

		var vm =  new Vue({
			el:"#payVm",
			data:{
				orderId:0,
                fee:0
			},
			methods: {
				urlToObj(url) {//解析url获取参数的工具函数
						url = url.split("?")[1];
						//"course1=js&course2=css&course3=jQ"
						var ary = url.split("&");
						//["course1=js","course2=css","course3=jQ"];
						var obj = {};
						ary.forEach((item) => {
							var a = item.split("=");//["course1","js"]
							obj[a[0]] = a[1];
						});
						return obj;
				 },
			},
			created() {
				//如果没有登录，返回登录界面

				//从url中获取orderId	
				var params = this.urlToObj(location.href);
				var orderId = params.orderId;
				if(!orderId){
                    alert("orderId不存在")
				}else{
					this.orderId = 	orderId;
					console.log(orderId)
					//下单，返回codeUrl
					axios.get("/weixin/unifiedorder?orderId="+orderId).then(res=>{
							//生成二维码
							var qrcode = new QRCode("qrImage", {
								text: res.data.codeUrl,
								width: 256,
								height: 256,
								colorDark : "#000000",
								colorLight : "#ffffff",
								correctLevel : QRCode.CorrectLevel.H
							});

							vm.fee = res.data.fee
							//开启定时器
							setInterval(function(){
								//查看订单状态
								axios.get("/weixin/queryOrder?orderId="+orderId).then(res=>{
									if(res.success){
											location.href="/paysuccess.html"
									}
								})	
							},5000)

					})

				}

			},
		})
		
	
</script>
</body>

</html>
